<!-- 商品详情页顶部组件 -->
<template>
  <div class="detail-top">
    <div class="detail-top-tool">
      <i class="iconfont" @click="$router.push({name:'home'})">&#xe604;</i>
      <Searcher msg="请输入商品名称搜索"></Searcher>
    </div>
    <div class="detail-top-shop">
      <img :src="shop.imgUrl" class="shop-img">
      <div class="shop-info">
        <div class="shop-info-title">{{shop.name}}</div>
        <div class="shop-info-disc">
          <div class="disc-item">月售{{ shop.sales }}</div>
          <div class="disc-item">起送￥{{ shop.expressLimit }}</div>
          <div class="disc-item">基础运费￥{{ shop.expressPrice }}</div>
        </div>
        <div class="shop-info-tag">{{shop.slogan}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import Searcher from '@/components/search'
// composition
export default {
  name: 'detailTop',
  props: ['shop'],
  components: { Searcher }
}
</script>

<style scoped lang="scss">
@import '@/styles/theme.scss';
.detail-top {
  &-tool {
    display: flex;
    align-items: center;
    padding: 16px 4.8vw;
    .iconfont{
      font-size: 28px;
      color:#B6B6B6;
      margin-right: 5px;
      position: relative;
      left: -5px;
    }
  }
  &-shop{
    padding: 0 4.8vw 16px;
    display: flex;
    .shop-img{
      width: 14.9333vw;
      height: 14.9333vw;
      margin-right: 4.2667vw;
    }
    .shop-info{
      font-size: 13px;
      color: $theme-font-color;
      &-title{
        font-size: 16px;
        margin-bottom: 3.1333vw;
      }
      &-disc{
        display: flex;
        margin-bottom: 3.1333vw;
        .disc-item+.disc-item{
          margin-left: 4.2667vw;
        }
      }
      &-tag{
        color: $remind-color;
      }
    }
  }
}
</style>